<template>
    <div class="myCollect" v-loading="loading">

        <!-- <div class="myCourse-select">
            <div class="select-item" v-for="(item,index) in typeList" :class="[item.addClass]" @click="select(index)">
                <span class="iconfont" :class="item.icon"></span>
                <span class="text">{{item.name}}</span>
            </div>
        </div>
 -->
        <div class="content-box" v-show="index==0">
            <div class="content-data ">

                <div class="course-item" v-for="(item,index) in courseList" :class="item.addClass" @click="goContent(item)">
                    <img :src="$axios.defaults.baseURL+item.photo" alt="">
                    <span class="title">{{item.courseName}}</span>
                    <div class="box">
                        <span class="money" v-show="Number(item.presentPrice)!=0">￥{{item.presentPrice}}</span>
                        <span class="money" v-show="Number(item.presentPrice)==0">免费</span>
                        <!-- <span class="man iconfont iconwodeicon">8</span> -->
                        <span class="number iconfont iconbofang2">{{item.classHours}}课时</span>
                    </div>
                    <div class="box">
                        <span class="name">{{item.courseTypeLabel}}</span>
                        <span class="quxiao" @click.stop="collect(item)">取消收藏</span>
                    </div>
                </div>
                <div style="clear:both"></div>
                <ui-pagination class="study-pagination"  :total="total" @pageChange="pageChange" :size="pageSize" v-show="courseList.length!=0"></ui-pagination>
                <nodata v-show="start && courseList.length==0"></nodata>
            </div>

        </div>
        <!-- <nodata></nodata> -->


    </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
import nodata from '@/components/nodata.vue'
import { Notification,Message} from 'element-ui';
export default {

    components: {
        'ui-pagination':Pagination,
        nodata
    },
    data(){
        return{
            total:null,
            index:0,
            loading:false,
            pageSize:8,
            pageNo:1,
            start:false,
            list:[
                {name:'学习中培训计划',addClass:'active'},
                {name:'历史培训计划',addClass:''},
            ],
            typeList:[
                {icon:'iconbofang',name:'点播课程',addClass:''},
                {icon:'iconzhibobofangshexiangjiguankanmianxing',name:'直播课程',addClass:''},
                {icon:'iconlaoshi',name:'面授课程',addClass:''},
            ],
            courseList:[],
        }
    },
    created(){
        this.getData();
    },
    mounted(){

    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        getData(){
          let that = this;
          this.loading = true;
          this.$axios.$post("/f/pageCollectionCourse?pageNo="+this.pageNo+"&pageSize="+this.pageSize)
          .then(function (response) {
                that.start = true;
                that.total = response.count;
                let list = response.data;
                if(list.length!=0){
                    list.forEach((item,i)=>{
                        item = Object.assign(item,item.educationCourse,item.educationCourse.courseInfo)
                    })
                }
                that.courseList = list;
                that.loading = false;
                that.start = true;
          })
          .catch(function (error) {
              // handle error
              console.log(error);
          })
        },
        collect(item){
          // if(!Cookies.get("token")){
          //   this.$router.push("/login");
          //   return;
          // }
          var that = this;
          this.$axios.$post("/f/collectionCourse?rootCourseId="+item.rootCourseId)
          .then(function (response) {
              Notification.success({
                title:'提示',
                message:"已取消收藏"
              })
                that.getData();
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
        },
        select(index){
            this.index = index;
            this.typeList.forEach((item,i)=>{
                if(i==index){
                    item.addClass = "select-active"
                }
                else{
                    item.addClass = ""
                }
            })
        },
        closeCourse(item){

        },
        goContent(item){
            this.$router.push("/dbcourse_content/"+item.rootCourseId)
        },
        pageChange(index){
            this.pageNo = index;
            this.getData();
        }
    }
}
</script>

<style lang="less" scoped="scoped">
  // @media (min-width: 1500px){
  //     .course-item{
  //       margin-left: calc((100% - 1100px)/10);
  //       margin-right: calc((100% - 1100px)/10);
  //     }
  // }
  // @media (max-width: 1500px){
  //     .course-item{
  //       margin-left: calc((100% - 880px)/8);
  //       margin-right: calc((100% - 880px)/8);
  //     }
  // }
    .myCollect{
        width:100%;
        box-sizing:border-box;
        padding:25px;
        .study-pagination{
            width:100% !important;
        }
        .content-box{
            width:100% !important;
        }
        .content-data{
            display:block;
        }
        .course-item{
                // width:16.5rem !important;
                // background:#fff;
                // margin-top:20px;
                // padding-bottom:10px;
                // cursor:pointer;
                // box-shadow:0 2px 10px #d8d8d8;
                // float:left;
                margin-right:32px;
                width: 220px;
                background: #fff;
                margin-bottom: 20px;
                padding-bottom: 1rem;
                cursor: pointer;
                float: left;
                img{
                    width:100%;
                    height:10rem !important;
                    display:block;
                }
                .title{
                    width:100%;
                    display:block;
                    margin-top:5px;
                    height:30px;
                    line-height:30px;
                    padding:0 12px;
                    box-sizing:border-box;
                    font-size:17px;
                    color:#444444;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .box{
                    width:100%;
                    box-sizing:border-box;
                    padding:0 12px;
                    height:30px;
                    .quxiao{
                          display: block;
                          padding: 0 10px;
                          margin-top: 2px;
                          height: 25px;
                          float: right;
                          line-height: 23px;
                          box-sizing: border-box;
                          border: 1px solid #4c87f4;
                          border-radius: 5px;
                          color: #4c87f4;
                          margin-right:5px;
                    }
                    .name{
                        line-height:30px;
                        float:left;
                        font-size:15px;
                        color:#444444;
                    }
                    .time{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        color:#888888;
                    }
                    .money{
                        line-height:30px;
                        font-size:22px;
                        color:#ff5924;
                        float:left;
                    }
                    .iconbofang2{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        margin-right:5px;
                        color:#4c87f4;
                    }
                    .iconbofang2:before{
                        margin-right:5px;
                    }
                    .iconwodeicon:before{
                        margin-right:5px;
                        font-size:18px;
                    }
                    .iconwodeicon{
                        line-height:30px;
                        float:right;
                        font-size:14px;
                        color:#ff541e;
                    }
                }
            }
            .course-item:nth-child(4n){
                margin-right:0 !important;
            }
        .myCourse-select{
            width:100%;
            display:flex;
            height:130px;
            margin-top:15px;
            .select-item{
                width:33.3%;
                height:100%;
                box-sizing:border-box;
                padding:20px 0;
                display:flex;
                justify-content:center;
                flex-wrap:wrap;
                cursor:pointer;
                .iconfont{
                    font-size:42px;
                    color:#888888;
                    display:block;
                    width:50px;
                    height:50px;
                    line-height:50px;
                    text-align:center;
                }
                .text{
                    font-size:16px;
                    color:#555555;
                    margin-top:0px;
                    display:block;
                    width:100%;
                    line-height:30px;
                    text-align:center;
                    height:30px;
                }
            }
            .select-item:hover{
                background:#f1f1f1;
            }
            .select-active{
                background:#f1f1f1;
            }
        }
    }


</style>
